<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <script src="../static/js/survey.js"></script>
    <script src="../static/js/comment.js"></script>
    <link rel="stylesheet" href="../static/css/survey.css">
</head>
<body>
<!-- 大框 -->
<div id="container">
    <!-- 1 头部-->
    <div id="header">
        <div id="logo"></div>
        <div id="title">
            <br style="font-size: 30px;">
            <font style="font-family: STHupo; font-size: 50px;">
                问卷调查<br/>
            </font>
            <font style="font-family: STHupo; font-size: 30px;">
                QUESTIONNAIRE SURVEY
            </font>
        </div>
        <div id="select_search">
            <table height="160px" align="right">
                <!--						<tr align="right">-->
                <!--							<td>-->
                <!--								<font style="font-family: STHupo; font-size: 20px; color:#0F5F49;">-->
                <!--									关键词:-->
                <!--								</font>-->
                <!--							</td>-->
                <!--							<td><input type="text" size="25"></td>-->
                <!--							<td><input type="image" src="../static/images/搜索.png"></td>-->
                <!--						</tr>-->
                <tr align="right">
                    <td>
                        <span style="font-family: STHupo; font-size: 20px; color:#0F5F49;">欢迎你：</span><span
                            th:text="${user.account}"
                            style="font-family: STHupo; font-size: 20px; color:#0F5F49;">用户</span>
                        <a href="userInfo"
                           style="font-family: STHupo; font-size: 20px; color:#0F5F49;  margin-left: 20px">
                            个人资料
                        </a>
                    </td>
                    <td><a href="/"
                           style="font-family: STHupo; font-size: 20px; color:#0F5F49; margin-left: 10px">注销</a></td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 2  导航栏-->
    <div id="nav">
        <table>
            <td><a href="index">首页</a></td>
            <td><a href="introduction">篮球赛事介绍</a></td>
            <td><a href="match">比赛集锦</a></td>
            <td><a href="tips">篮球攻略</a></td>
            <td><a href="star_player">名人堂</a></td>
            <!-- <td ><a href="toy">手办商城</a></td>
            <td ><a href="survey">问卷调查</a></td>  -->
            <!-- <td ><a href="join">加入我们</a></td>  -->
        </table>
    </div>
    <!-- 3标题 -->
    <div id="biaoti">
        <h2>问卷调查</h2>
        <hr size="2px" color="#b5b5b5" width="990px" align="left">
    </div>
    <!-- 4 问卷 -->
    <div id="wenjuan">
        <form style="padding-top: 220px;" action="" method="">
            <table cellspacing="0" cellpadding="0" width="990px" height="680px">
                <tr>
                    <td>
                        <table border="0" cellspacing="" cellpadding="">
                            <tr>
                                <td class="td1">1.您的性别：</td>
                                <td>
                                    <input id="boy" name="sex" type="radio"/>男&nbsp;&nbsp;
                                    <input id="girl" name="sex" type="radio"/>女
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="0" cellspacing="" cellpadding="">
                            <tr>
                                <td class="td1">2.您喜欢的球星：</td>
                            </tr>
                            <tr>
                                <td><input type="text" id="a" value="" size="30"/></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="0" cellspacing="" cellpadding="">
                            <tr>
                                <td class="td1">3.您的擅长位置：</td>
                                <td>
                                    <select>
                                        <option value="1">SG</option>
                                        <option value="2">PG</option>
                                        <option value="3">SF</option>
                                        <option value="4">PF</option>
                                        <option value="5">C</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="0" cellspacing="" cellpadding="">
                            <tr>
                                <td class="td1">
                                    4.您觉得在场上什么位置是核心：
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="" id="q" value=""/>控球后卫（PG）<br>
                                    <input type="checkbox" name="" id="q1" value=""/>得分后卫（SG）<br>
                                    <input type="checkbox" name="" id="q2" value=""/>小前锋（SF）<br>
                                    <input type="checkbox" name="" id="q3" value=""/>大前锋（PF）<br>
                                    <input type="checkbox" name="" id="q4" value=""/>中锋（C）
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="0" cellspacing="" cellpadding="">
                            <tr>
                                <td class="td1">
                                    5.您平常喜欢：
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="" id="w" value=""/>打5v5比赛<br>
                                    <input type="checkbox" name="" id="w1" value=""/>打3v3比赛<br>
                                    <input type="checkbox" name="" id="w2" value=""/>打1v1比赛<br>
                                    <input type="checkbox" name="" id="w3" value=""/>投篮比赛<br>
                                    <input type="checkbox" name="" id="w4" value=""/>自己练习
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="0" cellspacing="" cellpadding="">
                            <tr>
                                <td class="td1">
                                    6.您对NBA篮球资料站的建议：
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <textarea id="h" cols="70" rows="5" placeholder="请您提出宝贵的建议:"></textarea>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr height="50px">
                    <td>
                        <input type="submit" id="" name="" value="提交答案" onclick="check5()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" name="" id="" value="清空"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <!-- 5标题 -->
    <div id="biaoti">
        <h2>抽奖环节</h2>
        <hr size="2px" color="#b5b5b5" width="990px" align="left">
    </div>
    <!--6转盘  -->
    <div class="box">
        <div class="option"><img src="../static/images/toy2.png"></div>
        <div class="option"><img src="../static/images/jp1.png"></div>
        <div class="option"><img src="../static/images/jp2.png"></div>
        <div class="option"><img src="../static/images/jp3.png"></div>
        <div class="option five">点击抽奖</div>
        <div class="option"><img src="../static/images/jp4.png"></div>
        <div class="option"><img src="../static/images/jp5.png"></div>
        <div class="option"><img src="../static/images/jp6.png"></div>
        <div class="option"><img src="../static/images/jp7.png"></div>
    </div>
    <script>
        // 获取元素
        var options = document.getElementsByClassName("option");
        var button = document.getElementsByClassName("five")[0];
        // 所有奖项下标的值
        var arr = [0, 1, 2, 5, 8, 7, 6, 3];
        // 数组的下标的初始值
        var num = 0;
        // 转动的次数
        var count = 0;
        button.addEventListener("click", function () {
            // 获取的随机数   转动的次数
            var time = Math.ceil(Math.random() * 16 + 16);
            // 定时器来抽奖
            var timer = setInterval(function () {
                // 遍历arr数组      目的：如果不设置这个循环，那么一次走过的奖项都会变色，变不回原来的颜色
                for (var i = 0; i < arr.length; i++) {
                    options[arr[i]].style.backgroundColor = "green";
                }
                // 走到的奖项
                options[arr[num]].style.backgroundColor = "blue";
                num++;
                // 如果上面数组的下标值为8时，要重新赋值为0
                if (num == 8) {
                    num = 0;
                }
                // 走的div的个数
                count++;
                // 如果转动的次数与获取的随机数一致的情况下，清除定时器
                if (count == time) {
                    clearInterval(timer);
                    // 转动的次数清零
                    count = 0;
                }
            }, 100)
        })
    </script>
    <!-- 5 留言区-->
    <div id="comment">
        <h3>留言板</h3>
        <hr size="2px" color="#b5b5b5" width="990px" align="left">
        <form>
            <table align="center">
                <tr>
                    <td>邮箱：</td>
                    <td><input type="text" id="n"/></td>
                    <td>Wechat：</td>
                    <td><input type="text" id="x"/></td>
                    <td>留言时间：</td>
                    <td><input type="text" id="t" placeholder=""/></td>
                </tr>
                <tr>
                    <td>留言内容：</td>
                    <td colspan="5"><textarea id="txt" cols="86" rows="5" placeholder="评论的时候，请遵纪守法并注意语言文明"></textarea>
                    </td>
                </tr>
            </table>
            <div align="center">
                <input type="submit" value="提交留言" onclick="check()">
                <input type="reset" value="重置内容">
            </div>
        </form>
    </div>
    <!-- 6 版权区-->
    <div id="footer">
        <p class="p1">Copyright&nbsp;&copy;&nbsp;2022&nbsp;<span>LINBO</span>,All&nbsp;rights&nbsp;reserved.</p>
        <p class="p2">2022,版权所有&nbsp;LIN&nbsp;</p>
    </div>
</div>
</body>
</html>
